import React from 'react';
import {StyleSheet, View} from 'react-native';

import api from '../../common/api';
import utils from '../../common/utils';

import SearchBar from './searchBar';
import Banner from './banner';
import Nav from './nav';
import Ad from './ad';
import FavHeader from '../../components/favHeader';
import List from '../../components/list';

export default class extends React.Component {
    state = {
        bannerList: [],
        catList: [],
        favList: [],
        isFetchingFavList: false,
        bgColor: 'rgba(243,171,185,0)'
    };

    //获取数据
    getFavList = () => {
        const {isFetchingFavList, favList} = this.state;
        if (isFetchingFavList) {
            return;
        }
        this.setState({
            isFetchingFavList: true
        });
        api({url: 'api/item/getSuggestList', notNeedLogin: true})
            .then(data => {
                this.setState({
                    favList: [...favList, ...data]
                });
            })
            .catch(e => {
                console.log(e);
            })
            .finally(() => {
                this.setState({
                    isFetchingFavList: false
                });
            });
    };
    //获取banner
    getBannerList = () => {
        api({url: 'api/system/getBannerList', notNeedLogin: true})
            .then(data => {
                this.setState({
                    bannerList: data
                });
            })
            .catch(e => {
                console.log(e);
            });
    };
    //获取首页商品分类
    getCategory = () => {
        api({url: 'api/cate/getCateList', notNeedLogin: true})
            .then(data => {
                this.setState({
                    catList: data
                });
            })
            .catch(e => {
                console.log(e);
            });
    };
    //list header
    headerComponent = () => {
        const {bannerList, catList} = this.state;
        const {navigation} = this.props;
        return (
            <View>
                <Banner bannerList={bannerList} navigation={navigation}/>
                <Nav catList={catList} navigation={navigation}/>
                <Ad navigation={navigation}/>
                <FavHeader/>
            </View>
        );
    };

    //滚动事件
    onScroll = event => {
        let y = event.nativeEvent.contentOffset.y,
            opacity;
        y = y < 100 ? 100 : y >= 100 + 500 ? 100 + 500 : y;
        opacity = utils.easeInOutQuad((y - 100) / 500);
        opacity = opacity < 0 ? 0 : opacity > 1 ? 1 : opacity;
        this.setState({
            bgColor: `rgba(243,171,185,${opacity})`
        });
    };

    componentDidMount() {
        this.getBannerList();
        this.getCategory();

        this._didFocusSubscription = this.props.navigation.addListener(
            'didFocus',
            () => {
                if (this.state.favList.length === 0) {
                    this.getFavList();
                }
            }
        );
    }

    componentWillUnmount() {
        this._didFocusSubscription && this._didFocusSubscription.remove();
    }

    render() {
        const {favList, bgColor, bannerList, catList} = this.state;
        const {navigation} = this.props;
        return (
            <View style={styles.container}>
                <SearchBar navigation={navigation} bgColor={bgColor}/>
                <List
                    list={favList}
                    extraData={[bannerList, catList]}
                    ListHeaderComponent={this.headerComponent}
                    onScroll={this.onScroll}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f6f6f5',
        flex: 1
    }
});
